<template>
  <div class="color-picker flex flex-1">
    <el-color-picker v-model="color" :predefine="predefineColors" />
    <el-input v-model="color" class="mx-[10px] flex-1" type="text" readonly />
    <el-button type="text" @click="reset">重置</el-button>
  </div>
</template>
<script lang="ts" setup>
const props = defineProps({
  modelValue: {
    type: String,
  },
  defaultColor: {
    type: String,
  },
});
const emit = defineEmits<{
  (event: "update:modelValue", value: any): void;
}>();

const color = computed({
  get() {
    return props.modelValue;
  },
  set(value) {
    emit("update:modelValue", value);
  },
});
const predefineColors = [
  "#409EFF",
  "#28C76F",
  "#EA5455",
  "#FF9F43",
  "#01CFE8",
  "#4A5DFF",
];
const reset = () => {
  color.value = props.defaultColor;
};
</script>
